<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" class="banner-img" alt="">
            <div class="banner-info">
                <div class="banner-title">大连圣亚海洋世界</div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe634;</span>
                    39
                </div>
            </div>
        </div>
        <common-gallary
            :imgs="imgs"
            v-show="showGallary"
            @close="handleGalleryClose"
        ></common-gallary>
    </div>
</template>
<script>
import CommonGallary from 'common/gallary/gallary'
export default {
    name: 'DetailBanner',
    data () {
        return {
            showGallary: false,
            imgs: []
        }
    },
    methods: {
        handleBannerClick () {
            this.showGallary = true;
        },
        handleGalleryClose () {
            this.showGallary = false;
        }
    },
    components: {
        CommonGallary
    }
}
</script>
<style lang="stylus" scoped>
.banner
    overflow: hidden
    position relative
    height: 0
    padding-bottom: 55%
    .banner-img
        width: 100%
    .banner-info
        display: flex
        position: absolute
        left: 0
        right: 0
        bottom: 0
        line-height: .6rem
        color: #fff
        background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
        .banner-title
            flex: 1
            font-size: .32rem
            padding: 0 .2rem
        .banner-number
            padding: 0 .4rem
            height: .32rem
            line-height: .32rem
            margin-top: .2rem
            font-size: .2rem
            .banner-icon
                font-size: .24rem
</style>
